<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Water Tracker</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div style="margin: 20px auto; text-align: center; margin-bottom: 0px;">
        <a href="http://www.100sucai.com/" target="_blank"><img src="100sucai.png" alt=""></a>
    </div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none">
        <symbol id="wave">
            <path d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path>
            <path d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path>
            <path d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path>
            <path d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path>
        </symbol>
    </svg>
    <div class="page" id="page">
        <div class="tracker">
            <div class="tracker__inner" id="tracker">
                <div class="tracker__item">12:08</div>
                <div class="tracker__item">15:10</div>
                <div class="tracker__item tracker__item_active">16:58</div>
            </div>
        </div>
        <div class="percent">
            <div class="percent__inner">
                <div class="percent__num" id="count">50</div>
                <div class="percent__sign">%</div>
            </div>
        </div>
        <button class="button" id="button">Drink</button>
        <div class="water" id="water">
            <svg class="water__wave water__wave_back" viewBox="0 0 560 20">
                <use xlink:href="#wave"></use>
            </svg>
            <svg class="water__wave water__wave_front" viewBox="0 0 560 20">
                <use xlink:href="#wave"></use>
            </svg>
            <!-- 水泡 -->
            <div class="water__inner">
                <div class="bubble bubble_1"></div>
                <div class="bubble bubble_2"></div>
                <div class="bubble bubble_3"></div>
            </div>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>

</html>